<template>
	<view class='confirm-order bg-active-color'>
		<Lines></Lines>
		<!--地址-->
		<view class='order-map' @tap='goPathList'>
			<template v-if='path'>
				<view class='map-title'>
					<view class='map-name'>收件人：{{path.name}}</view>
					<view>{{path.tel}}</view>
				</view>
				<view class='map-city'>收货地址：{{path.province}} {{path.city}} {{path.district}} {{path.address}}</view>
			</template>
			<template v-else>
				<view class='map-title'>
					<view class='map-name'>请选择地址</view>
				</view>
			</template>
		</view>

		<!--商品-->
		<view class='goods-list'>
			<view class='goods-content bg-active-color'
			 v-for='(item,index) in goodsList' :key='index'>
				<image class='goods-img' :src='item.imgUrl' mode=""></image>
				<view class='goods-text'>
					<view class='goods-name'>{{item.name}}</view>
					<view class='goods-size f-color'>颜色分类：黑色</view>
					<view class='f-active-color' style='font-size:24rpx'>7天无理由</view>
				</view>
				<view>
					<view>¥{{item.pprice}}</view>
					<view class='f-color'>*{{item.num}}</view>
				</view>
			</view>
		</view>

		<!--底部 : 提交订单-->
		<view class='order-foot'>
			<!-- {{totalCount.pprice}} -->
			<view class='total-price'>合计：<text class='f-active-color'>¥{{totalCount.pprice}}</text></view>
			<view class="confirm" @tap='goPayment'>提交订单</view>
		</view>
	</view>
</template>

<script>
	import Lines from '@/components/common/Lines.vue'
	import {mapGetters,mapState,mapMutations} from 'vuex'
	export default {
		components: {
			Lines
		},
		data() {
			return {
				path: false,
			}
		},
		methods: {
			
			//跳转-地址管理页面
			goPathList() {
				uni.navigateTo({
					url:'../my-path-list/my-path-list?type=selectedPath'
				})
			},

			goPayment() {
				// uni.navigateTo({
				// 	url:'/pages/payment/payment?details='+JSON.stringify({
				// 		price:this.totalCount.pprice
				// 	})
				// })
				
				uni.showToast({
					title:'提交成功',
					icon:'none'
				})
				setTimeout(()=>{
					uni.redirectTo({
						url:'/pages/my-order/my-order'
					})
				},2000)
				
			}
		},
		
		computed:{
			...mapState({
				list:state=>state.cart.list,
			    // orderNumber:state=>state.order.orderNumber,
			    // selectedList:state=>state.cart.selectedList
			}),
			...mapGetters(['defaultPath','totalCount']),
			//根据商品列表找到对应e.detail(需要结算的商品id) 数据的 id  最终返回商品
			goodsList(){
				console.log(this.item);
				return this.item.map(id=>{
					return this.list.find(v=>v.id == id);
				})
			}
		},

		onLoad(e) {
			
			//需要结算的商品id集合  [2,9]
			this.item = JSON.parse(e.detail);
			// console.log(this.list,this.item);
			
			// vuex默认地址的赋值
			if(this.defaultPath.length){
				this.path = this.defaultPath[0];
				// console.log(this.defaultPath);
			}
			//自定义事件，on：接受值
			uni.$on("selectPathItem",(res)=>{
				this.path = res;
			})
		},
		onUnload() {
			// $off :移除自定义事件
			uni.$off('selectPathItem',()=>{
				console.log('移除了selectPathItem');
			})
		},
	}
</script>

<style scoped>
	.confirm-order {
		position: absolute;
		left: 0;
		top: 0;
		rigth: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
	}

	.order-map {
		padding: 20rpx;
		background-color: #fff;
		line-height: 40rpx;
	}

	.map-title {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10px;
	}

	.map-name {
		font-weight: bold;
	}

	.goods-list {
		margin-top: 20rpx;
		background-color: #FFFFFF;
		padding: 20rpx 0;
	}

	.goods-content {
		margin-top: 20rpx;
		padding: 10rpx 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #f5f5f5;
	}

	.goods-text {
		width: 360rpx;
		padding: 0 10rpx;
		font-size: 26rpx;
	}

	.goods-img {
		width: 160rpx;
		height: 160rpx;
	}

	.goods-name {
		font-size: 26rpx;
	}

	.goods-size {
		font-size: 24rpx;
	}

	.order-foot {
		height: 150rpx;
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #FFFFFF;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.total-price {
		padding: 0 20rpx;
	}

	.confirm {
		color: #FFFFFF;
		background-color: #49BDFB;
		padding: 10rpx 30rpx;
	}
</style>